<template>
  <input
    type="number"
    v-model.number="currentValue"
    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm"
    :step="step"
    :min="min"
    :max="max"
    @change="$emit('input', currentValue)"
    @blur="$emit('blur', currentValue)"
  >
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: null
    },
    max: {
      type: Number,
      default: null
    }
  },
  emits: ['input', 'blur'],
  setup(props) {
    const currentValue = ref(props.value);

    // 监听外部值变化
    watch(
      () => props.value,
      (newVal) => {
        currentValue.value = newVal;
      }
    );

    return {
      currentValue
    };
  }
};
</script>
    